<template>
  <div class="">
    <a-card class="general-card">
      <template #title>
        <a-radio-group v-model="formLayout" type="button">
          <a-radio value="horizontal">水平排列</a-radio>
          <a-radio value="vertical">垂直排列</a-radio>
          <a-radio value="inline">行内排列</a-radio>
        </a-radio-group>
      </template>
      <a-form ref="formRef" :model="formData" :layout="formLayout">
        <a-row>
          <a-col :span="8">
            <a-form-item field="input.input1" label="输入框">
              <a-input v-model="formData.input.input1" placeholder="请输入"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="input.input2" :hide-label="true">
              <a-input v-model="formData.input.input2" placeholder="请输入">
                <template #append>KB</template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="select.select1" label="下拉框">
              <a-select v-model="formData.select.select1" placeholder="请选择">
                <a-option v-for="(item, index) in optionList" :key="index" :value="item.value" :label="item.name"/>
              </a-select>
              <a-input-number v-model="formData.sorting" :step="1" :min="1"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="8">
            <a-form-item field="tags" label="标签">
              <a-input-tag v-model="formData.tags" placeholder="请输入标签"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="radio" label="单选">
              <a-radio-group v-model="formData.radio">
                <a-radio v-for="(item, index) in optionList" :key="index" :value="item.value">{{ item.name }}</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="radio" label="多选">
              <a-checkbox-group v-model="formData.options">
                <a-checkbox v-for="(item, index) in optionList" :key="index" :value="item.value">{{ item.name }}</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="rate" label="评分">
              <a-rate v-model="formData.score" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="slider" label="滑块">
              <a-slider v-model="formData.slider" :max="10"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="switch" label="开关">
              <a-switch v-model="formData.switch" :checked-value="1" :unchecked-value="0"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="date.time.time1" label="时间">
              <a-time-picker v-model="formData.date.time.time1"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="date.date.date1" label="日期">
              <a-date-picker v-model="formData.date.date.date1" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="date.week" label="周选择器">
              <a-week-picker v-model="formData.date.week"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="date.month" label="月选择器">
              <a-month-picker v-model="formData.date.month"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="带时间的日期">
              <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="定制预设时间">
              <a-date-picker :shortcuts="shortcuts" shortcuts-position="left"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item field="color" label="颜色选择器">
              <a-color-picker
                :defaultValue="formData.color"
                showHistory
                showPreset
                @change="updateColor"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="color2" label="颜色选择器">
              <color-picker :color="formData.color2" width="260px" @update:color="updateColor2"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="文件">
              <a-button size="mini" @click="fileUpload()">选择文件</a-button>
              <template #extra>
                <div>每张图片大小不超过 500 KB，jpg、png格式。</div>
              </template>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="cropper" label="图片剪裁">
              <a-image :src="cropperImg.url" width="200" height="200"/>
              <template #extra>
                <a-button size="mini" @click="openCropper()">图片剪裁</a-button>
              </template>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item field="latitude" label="">
              <span class="arco-input-wrapper">
                <input v-model="formData.address.details" id="mapKeyword" class="arco-input arco-input-size-medium" type="text" placeholder="请输入请输入详细地址">
              </span>
            </a-form-item>
            <a-form-item field="" label="">
              <AmapMap keyword-id="mapKeyword" :address-detail="{longitude: formData.address.longitude, latitude: formData.address.latitude}" @mapCallback="mapCallback"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider orientation="left"><span class="title">其他信息</span></a-divider>
        <a-row :gutter="8">
          <a-col :span="24">
            <a-form-item field="description" label="参数说明">
              <a-textarea v-model="formData.description" placeholder="请填写参数说明，最多不超多200字。" :auto-size="{minRows:4,maxRows:7}"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item field="content" label="富文本编辑器">
          <TinymceEditor v-model="formData.content" :tinymceId="`vue-tinymce-${Math.floor(Math.random() * 100000 + Math.random() * 20000 + Math.random() * 5000)}`" @update:modelValue="getContent"/>
        </a-form-item>
        <a-form-item field="content2" label="富文本编辑器">
          <TinymceEditor2 v-model="formData.content2" :tinymceId="`vue-tinymce-${Math.floor(Math.random() * 100000 + Math.random() * 20000 + Math.random() * 5000)}`"/>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button>重置</a-button>
            <a-button type="primary" :loading="loading" @click="onSubmitClick">提交</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <a-modal
      v-model:visible="fileDialogVisible"
      :title="fileDialogTitle"
      :modal-style="{ width: '80%', height: '80%' }"
      :body-style="{ height: 'calc(100% - 108px)', overflow: 'auto' }"
      :mask-closable="false"
      :footer="false"
    >
      <file-manage file-type="image" @fileCancelCallback="fileCancelCBK" @fileOkCallback="fileOkCBK" />
    </a-modal>

    <a-modal
      v-model:visible="cropperDialogVisible"
      :title="cropperDialogTitle"
      :modal-style="{ width: '800px', height: '610px' }"
      :body-style="{ height: 'calc(100% - 108px)', overflow: 'auto' }"
      :mask-closable="false"
      @before-ok="cropperDialogBeforeOk"
    >
      <cropper-image ref="cropperRef" :file="cropperImg" @cropperOkCallback="cropperOkCBK" />
    </a-modal>
  </div>
</template>

<script setup>
  import { ref, reactive, h, compile, nextTick, onMounted, onUnmounted } from 'vue';
  import { Message, Modal } from '@arco-design/web-vue';
  import dayjs from 'dayjs';

  import useLoading from '@/hooks/loading';
  import FileManage from '@/views/components/file.vue';
  import ColorPicker from '@/components/color-picker/index.vue';
  import CropperImage from '@/components/cropper/index.vue';
  import AmapMap from '@/components/map/amap.vue';
  import TinymceEditor from '@/components/tinymce/index.vue';
  import TinymceEditor2 from '@/components/tinymce/index.vue';

  const { loading, setLoading } = useLoading(false);
  const baseFormData = {
    id: '',
    created_at: '',
    updated_at: '',
    input: {
      input1: '',
      input2: '',
    },
    select: {
      select1: '',
    },
    color: '#007AFFFF',
    color2: '#007AFFFF',
    files: [],
    address: {
      details: '',
      longitude: '',
      latitude: '',
    },
    keywords: '',
    description: '',
    content: '',
    content2: '',
    date: {
      time: {
        time1: '',
      },
      date: {
        date1: '',
      },
      week: '',
      month: '',
    },
    range_date: [],
    sorting: 10,
    status: 1,
  };
  const formRef = ref();
  const formData = ref(baseFormData);

  const optionList = [
    {
      name: '选项01',
      value: 1,
    },
    {
      name: '选项02',
      value: 2,
    },
    {
      name: '选项03',
      value: 3,
    },
    {
      name: '自定义',
      value: 4,
    },
  ];
  // 预设时间范围
  const shortcuts = [
    {
      label: '昨天',
      value: () => dayjs().subtract(1, 'day')
    },
    {
      label: '今天',
      value: () => dayjs(),
    },
    {
      label: '一周后',
      value: () => dayjs().add(1, 'week'),
    },
    {
      label: '一个月后',
      value: () => dayjs().add(1, 'month'),
    },
    {
      label: '两个月后',
      value: () => dayjs().add(2, 'month'),
    },
  ];

  const formLayout = ref('vertical');
  const fileDialogVisible = ref(false);
  const fileDialogTitle = ref('上传文件');
  const cropperRef = ref();
  const cropperDialogVisible = ref(false);
  const cropperDialogTitle = ref('图片剪裁');
  const cropperImg = ref({
    url: 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
    path: '',
  });

  const onSubmitClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      setLoading(true);
    }
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  };

  const updateColor = (color) => {
    console.log(color);
    formData.value.color = color;
  };
  const updateColor2 = (color) => {
    console.log(color);
    formData.value.color2 = color.hex8;
  };

  const fileUpload = () => {
    fileDialogVisible.value = true;
  };
  const fileCancelCBK = () => {
    fileDialogVisible.value = false;
  };
  const fileOkCBK = (fileList) => {
    fileDialogVisible.value = false;
  };

  // 图片剪裁
  const openCropper = () => {
    cropperDialogVisible.value = true;
    cropperRef.value.initCropper();
  };
  const cropperOkCBK = (imgUrl) => {
    // cropperImg.value.url = imgUrl;
  };
  const cropperDialogBeforeOk = (done) => {
    cropperDialogVisible.value = false;
    cropperImg.value.url = cropperRef.value.getCropData();
    done();
  };

  const getContent = (value) => {
    // console.log(formData.value);
  };

  // 地图回调
  const mapCallback = (address) => {
    console.log(address);
  };

  onMounted(async () => {

  });
  onUnmounted(() => {

  });
</script>

<script>
  export default {
    name: 'TestForm',
  };
</script>

<style scoped lang="less">

</style>
